<template>
  <div class="BasicSet scroll-content">
    <el-form :model="formModel" label-width="150px" ref="form">
      <el-form-item label="信息模块" prop="info_block_show">
        <el-switch
          v-model="formModel.info_block_show"
          :disabled="cantEdit"
        ></el-switch>
        <span class="tips">
          <i class="el-icon-warning-outline"></i>
          是否开启信息模块（新闻、公告、规章制度），开启后将在PC首页展示
        </span>
      </el-form-item>
      <el-form-item label="流程快捷入口" prop="process_quick">
        <el-switch
          v-model="formModel.process_quick"
          :disabled="cantEdit"
        ></el-switch>
        <span class="tips">
          <i class="el-icon-warning-outline"></i>
          是否开启流程快捷入口，开启后将在PC首页展示
        </span>
      </el-form-item>
      <el-form-item label="PC端应用分类筛选" prop="app_filter">
        <el-switch
          v-model="formModel.app_filter"
          :disabled="cantEdit"
        ></el-switch>
        <span class="tips">
          <i class="el-icon-warning-outline"></i>
          是否开启PC端应用分类筛选与应用分类菜单，开启后将在首页展示
        </span>
      </el-form-item>
      <el-form-item label="PC端应用卡片样式" prop="card_type">
        <div class="app-cards">
          <div
            :class="[
              'app-card-content',
              formModel.card_type === ind ? 'active' : '',
            ]"
            v-for="ind of 2"
            :key="`card${ind}`"
            @click="changeActive(ind)"
          >
            <app-card :type="ind" :appInfo="appInfo" />
            <div class="active-tip" v-if="formModel.card_type === ind">
              <i class="el-icon-check"></i>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="浏览器页签名称"
        prop="browser_name_zh"
        required
        :rules="[{ required: true, message: '请输入浏览器页签名称' }]"
      >
        <el-input
          v-model="formModel.browser_name_zh"
          placeholder="请输入浏览器页签名称"
          :disabled="cantEdit"
        ></el-input>
        <el-popover
          placement="top-end"
          width="300"
          trigger="click"
          popper-class="basic-set-popover"
        >
          <el-form :model="formModel" label-width="50px">
            <el-form-item label="中文">
              <el-input
                v-model="formModel.browser_name_zh"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="英文">
              <el-input
                v-model="formModel.browser_name_en"
                placeholder="Please input"
              ></el-input>
            </el-form-item>
          </el-form>
          <i
            class="iconfont icon-guojihua"
            v-show="!cantEdit"
            slot="reference"
          ></i>
        </el-popover>
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button v-if="cantEdit" type="primary" @click="edit">编辑</el-button>
      <el-button v-if="!cantEdit" type="primary" @click="save">保存</el-button>
      <el-button v-if="!cantEdit" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getAllSettingsMap, setSetting } from "@/http/api";
import AppCard from "../public/AppCard.vue";
export default {
  name: "BasicSet",
  components: { AppCard },
  data() {
    return {
      formModel: {},
      copyFormModel: {},
      usedSettings: [
        "info_block_show",
        "process_quick",
        "app_filter",
        "card_type",
        "browser_name_zh",
        "browser_name_en",
      ],
      cantEdit: true,
      appInfo: {
        icon_index: 1,
        app_name: "应用名称",
        describe: "应用的业务说明文字",
        collected: 1,
      },
    };
  },
  async mounted() {
    let res = await getAllSettingsMap();
    if (res.code === 20041) {
      this.formModel = { ...res.data };
      for (const key in this.formModel) {
        this.formModel[key] === 1
          ? (this.formModel[key] = true)
          : this.formModel[key] === 0
          ? (this.formModel[key] = false)
          : undefined;
      }
      this.formModel.card_type = res.data.card_type;
    }
  },
  watch: {
    "formModel.browser_name_zh": function (newVal) {
      document.title = newVal;
    },
  },
  methods: {
    changeActive(ind) {
      if (!this.cantEdit) {
        this.formModel.card_type = ind;
      }
    },
    edit() {
      this.copyFormModel = Object.assign({}, this.formModel);
      this.cantEdit = false;
    },
    save() {
      this.$refs.form.validate(async (res) => {
        if (res) {
          let ifSuccess = true;
          for (let index = 0; index < this.usedSettings.length; index++) {
            const type = this.usedSettings[index];
            let res = await setSetting({
              type,
              value:
                this.formModel[type] === true
                  ? 1
                  : this.formModel[type] === false
                  ? 0
                  : this.formModel[type],
            });
            if (res.code === 20030) {
              ifSuccess = false;
            }
          }
          if (ifSuccess) {
            this.$message.success("修改成功");
            this.cantEdit = true;
          }
        }
      });
    },
    cancel() {
      this.formModel = Object.assign({}, this.copyFormModel);
      this.cantEdit = true;
    },
  },
};
</script>
<style lang="less" scoped>
.BasicSet {
  :deep {
    .el-form-item {
      position: relative;
      .el-form-item__label {
        font-weight: 600;
      }
      .tips {
        padding: 0 10px;
        font-size: 12px;
        color: #999;
      }
      .app-cards {
        display: flex;
        align-items: flex-start;
        .app-card-content {
          padding: 8px;
          border-radius: 4px;
          cursor: pointer;
          position: relative;
          &.active {
            background-color: #ebf1ff;
            border: 1px solid #4c78fc;
          }
          .active-tip {
            width: 20px;
            height: 20px;
            position: absolute;
            display: flex;
            align-items: center;
            bottom: 0;
            right: 0;
            background-color: #4c78fc;
            border-top-left-radius: 20px;
            i {
              padding-left: 5px;
              color: #fff;
            }
          }
          .AppCard {
            pointer-events: none;
          }
        }
      }
      .iconfont.icon-guojihua {
        position: absolute;
        top: 0;
        right: calc(40% + 10px);
        cursor: pointer;
      }
      .el-input {
        width: 60%;
      }
    }
  }
  & > .buttons {
    margin-top: 20px;
    margin-left: 150px;
  }
}
</style>
<style lang="less">
.basic-set-popover {
  .el-form .el-form-item:last-child {
    margin-bottom: 0;
  }
}
</style>
